<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../font_3646150_ujdk016uf8/iconfont.css">
    <script src="../font_3646150_ujdk016uf8/iconfont.js"></script>
</head>
<style>

</style>

<body>
    <header>
        <nav>
            <img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
            <div class="nav_right">
                <div class="box_nav">
                    <input type="text" placeholder="淘宝快乐玛丽">
                    <div>搜索</div>
                </div>
                <div class="nav_text">
                    <p style="color: rgb(255, 132, 0);">一淘限时抢</p>
                    <p>杯子</p>
                    <p>卫衣</p>
                    <p>项链</p>
                    <p>连衣裙</p>
                    <p>男外套</p>
                    <p>手机壳</p>
                    <p>笔袋</p>
                    <p>运动鞋</p>
                    <p>女套装</p>
                    <p>oppo</p>
                </div>
            </div>
            <img src="https://gw.alicdn.com/tfs/TB1cjogTqL7gK0jSZFBXXXZZpXa-227-79.png" alt="">
        </nav>

        <section>
            <div>
                <p>价格区间</p>
                <input type="text" name="" id="" placeholder="￥">-
                <input type="text" name="" id="" placeholder="￥">
            </div>
            <div>

            </div>
        </section>

        <div class="goods_list">
            <!-- 等待渲染 -->
        </div>
    </header>
</body>
<script>
    $.ajax({
        method: "get",
        url: "http://localhost:8080/goods",
        data: {},
        success: (data) => {
            console.log(data.otherData)
            var goods_data = "";
            for (var i = 0; i < data.otherData.length; i++) {
                goods_data += `<div class="good">
                <img
                    src="${data.otherData[i].src}">
                <div class="text">${data.otherData[i].text}</div>
                <p class="prise">￥<span>${data.otherData[i].prise1}</span><span>${data.otherData[i].prise2}</span></p>
                <div class="shop_info"><span class="iconfont icon-fangdajing"></span><span>${data.otherData[i].shop_name}</span></div>
                <hr>
                <div class="xiaoliang">月销<span>${data.otherData[i].xoaploang}</span></div>
            </div>`
            }
            console.log(goods_data)
            $(".goods_list").html(goods_data)
        },
        error: () => {
            console.log("goods_data_GET_FAILED")
        }
    })
</script>

</html>